﻿@{
    ViewBag.Title = "  扫码支付测试  ";
}

<h2>商品信息</h2>

<div class="container text-center">
    <div class="row text-center">

        <span class="col-md-2">
            填写订单编号：
        </span>
        <span class="col-md-3">
            <input type="text" class="form-control" id="order-id" placeholder="订单编号">
        </span>
    </div>
    <br />


    <div class="col-md-6">

        <div class="well">
            手机网页支付 0.01 元
        </div>

        <div>
            <span>
                <button class="btn btn-success" id="btn-wap-pay" type="button">唤起支付</button>
            </span>
            <span>
                <button class="btn btn-success btn-refund-order" type="button">退款</button>
            </span>
        </div>
    </div>

    <div class="col-md-6">
        <div class="well">
            支付宝扫码支付 0.01 元
        </div>
        <div>
            <span>
                <button class="btn btn-success" id="btn-scan-pay" type="button">打开支付</button>
            </span>
            <span>
                <button class="btn btn-success btn-refund-order" type="button">退款</button>
            </span>
        </div>
    </div>

    <div class="col-md-6">
        <div class="well">
            支付宝页面收银台支付 0.01 元
        </div>
        <div>
            <span>
                <button class="btn btn-success" id="btn-page-pay" type="button">打开支付</button>
            </span>
            <span>
                <button class="btn btn-success btn-refund-order" type="button">退款</button>
            </span>
        </div>
    </div>
</div>


<div id="form-load-container" style="display: none"></div>

@section Scripts
    {
    <script src="/js/jquery.qrcode.min.js"></script>
    <script>
        //  pc端网页支付
        $(function () {
            $("#btn-wap-pay").on("click",
                function () {

                    var orderId = $("#order-id").val();
                    if (!orderId) {
                        alert("请输入订单编号！");
                        return;
                    }

                    $.post("/alipay/GetWapPayInfo?orderId=" + orderId,
                        function (res) {
                            if (res.ret == 0) {
                                $("#form-load-container").append(res.data);
                            }
                        });
                });
        });

        //  pc
        $(function () {
            $("#btn-page-pay").on("click",
                function () {

                    var orderId = $("#order-id").val();
                    if (!orderId) {
                        alert("请输入订单编号！");
                        return;
                    }

                    $.post("/alipay/GetPagePayInfo?orderId=" + orderId,
                        function (res) {
                            if (res.ret == 0) {
                                $("#form-load-container").append(res.data);
                            }
                        });
                });
        });

        //  扫码支付
        $(function () {
            $("#btn-scan-pay").on("click",
                function () {

                    var orderId = $("#order-id").val();
                    if (!orderId) {
                        alert("请输入订单编号！");
                        return;
                    }

                    $.post("/alipay/GetScanPayInfo?orderId=" + orderId,
                        function (res) {
                            if (res.ret == 0) {

                                $("#btn-scan-pay").popover({
                                    container: 'body',
                                    html: true,
                                    title: "支付二维码",
                                    placement: "bottom",
                                    template: '<div class="popover" role="tooltip">' +
                                    '<div class="arrow">' +
                                    '</div>' +
                                    '  <h3 class="popover-title"></h3>' +
                                    '  <div class="popover-content" id="scan-qr-code">生成中....' +
                                    '  </div>' +
                                    '</div>'
                                });
                                $("#btn-scan-pay").popover('show');
                                $('#scan-qr-code').qrcode({ width: 120, height: 120, text: res.qr_code });

                            }
                        });
                });
        })
    </script>
}
